<template>
  <div class="formList">
    
  </div>
  <el-table :data="tableData">
    <el-table-column v-if="props.showSelect" width="40">
      <template #default="scope">
        <el-checkbox
          @change="changeCheck($event, scope.row)"
          v-model="scope.row.isCheck"
        ></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column
      v-for="(item, index) in props.listData"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :width="item.width || 180"
    >
    </el-table-column>
  </el-table>
  <div style="padding: 10px">
    <el-pagination
      small
      background
      layout="prev, pager, next"
      :page-size="searchFrom.pageSize"
      style="float: right"
      v-model:current-page="searchFrom.pageNum"
      :total="total"
      @currentChange="handleCurrentPage"
    />
  </div>
</template>
<script setup>
import { onMounted, ref, defineProps, watch } from "vue";
import service from "./api";
const emit = defineEmits(["selectChange"]);
const props = defineProps({
  listData: {
    type: Array,
    default: [],
  },
  formList:{
    type: Array,
    default: [],
  },
  // tableData: {//表格数据
  //   type: Array,
  //   default: [],
  // },
  selectedIds: {
    //多选框id数组
    type: Array,
    default: [],
  },
  showSelect: {
    //是否展示多选框
    type: Boolean,
    default: false,
  },
});
const selectIds = ref([]); //选择的id数组
const tableData = ref([]);
const searchFrom = ref({
  pageSize: 10,
  pageNum: 1,
});
const total = ref(100);
onMounted(() => {
  selectIds.value = props.tableData;
  //处理多选
  props.showSelect &&
    tableData.value.forEach((element) => {
      if (selectIds.value.includes(element.id)) element.isCheck = true;
      else element.isCheck = false;
    });
  getData();
});

watch(props.tableData, () => {
  console.log(props.tableData);
  tableData.value = props.selectedIds || [];
});

//多选框选择函数
const changeCheck = (isCheck, row) => {
  let _forId = [...selectIds.value];
  if (isCheck) {
    _forId.push(row);
  } else {
    _forId = _forId.filter((item) => item.id !== row.id);
  }
  selectIds.value = _forId;
  emit("selectChange", _forId);
};

//分页改变
const handleCurrentPage = (val) => {
  searchFrom.pageNum = val;
  getData()
};

//获取数据
const getData = () => {
  let param={
    ...searchFrom.value,
  }
  console.log(param);
  // service({
  //   url: 'URL',
  //   params: {data:''},
  //   method: "GET",
  // }).then(() => {
  // });
  tableData.value = [
    {
      id: 1,
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    },
    {
      id: 2,
      date: "2016-05-04",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1517 弄",
    },
    {
      id: 3,
      date: "2016-05-01",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1519 弄",
    },
    {
      id: 4,
      date: "2016-05-03",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1516 弄",
    },
  ];
};
</script>

<style lang="scss">
.el-table {
  // width: calc(100% - 60px);
}
</style>
